<template>
    <div>
        <main>
            <div class="login">
                
                <van-icon preview-image='previewImage' class="touxiang" name="smile-comment-o" />
                <p>
                    <van-uploader v-if="show" :after-read="afterRead" v-model="fileList" />
                    <img v-if="imgShow" class="coverImg" src="../images/logo.png" alt="">
                    <router-link tag="a" to="/login">{{nickName}}</router-link>
                    <span>签到领积分&gt;</span>  
                </p>
                <button v-if="show2" @click="out">退出</button>
                 <div class="greenCart"> 
                        <p><b>绿卡</b>花0.25元/天,预计省806元/年</p>
                        <p>立即开通&nbsp;&nbsp;&gt;</p>
                    </div>
            </div>
            <div class="coupons">
                <p><span>0</span><span>优惠券</span></p>
                <p><span>8</span><span>积分</span></p>
                <p><span>0.00</span><span>余额 (元)</span><span>充100送36</span></p>
            </div>
            <div class="myOrder">
                <p class="title">
                    <router-link to="/orderlist" tag="span">我的订单</router-link>
                    <router-link to="/orderlist" tag="span">查看全部订单&nbsp;&nbsp;&gt;</router-link>
                </p>
                <div class="modeSelect">
                    <p><van-icon name="pending-payment" /><span>待支付</span></p>
                    <p><van-icon name="logistics" /><span>待收货</span></p>
                    <p><van-icon name="comment-circle-o" /><span>待评价</span></p>
                    <p><van-icon name="refund-o" /><span>售后/退货</span></p>
                </div> 
            </div>
            <div class="welfare">
                <h2>常用功能</h2>
                <div>
                    <p><van-icon name="vip-card-o" /><span>我的绿卡</span></p>
                     <router-link tag="p" to="/myaddress"><van-icon name="location-o" /><span >收货地址</span></router-link>
                     <p><van-icon name="gift-o" /><span>邀请有礼</span><span>得30元红包</span></p>
                     <p><van-icon name="phone-o" /><span>联系客服</span></p>
                     <p><van-icon name="scan" /><span>扫一扫</span></p>
                     <p><van-icon name="gift-card-o" /><span>礼品卡</span></p> 
                    <p><van-icon name="envelop-o" /><span>意见反馈</span></p> 
                    <p><van-icon name="setting-o" /><span>设置</span></p>
                </div>
            </div>
            <div class="like"><h2>——.&nbsp;&nbsp;猜你喜欢&nbsp;&nbsp;.——</h2></div>
            <div class="likepro">
                <dl v-for="(item,i) in myFavorite" :key="i">
                    <router-link :to="`/detail/`+item._id" tag="dt">
                        <img :src="item.coverImg" alt="">
                    </router-link>
                    <dd>{{item.name}}</dd>
                    <dd>￥{{item.price}}</dd>
                    <van-icon name="cart-circle-o" />
                </dl>
            </div>
        </main>
    </div>
</template>

<script>
import * as api from '@/api/getProlist'
export default {
    name:'Myself',
    data(){
        return{
            title:'我的',
            nickName:'立即登录',
            previewImage:'true',
            fileList:[],
            show:true,
            imgShow:false,
            myFavorite:[],
            show2:false
        }
    },
    methods:{
        afterRead(file) {
      // 此时可以自行将文件上传至服务器
        console.log(file);
    },
    out(){
        this.$router.push('/')
    }
    },
    mounted(){
        this.$emit('toparent',[this.title,3])
        if(this.$store.state.nickName!=''){
             this.nickName=this.$store.state.nickName
             this.show2=true
        }else{
            this.nickName='立即登录'
        }
        api.getProlist({product_category:'5dbc1975440b810ee8ed76a3'}).then(data=>{
            this.myFavorite = data.data.products
        })

    },
    watch:{
        fileList:function(val,oldVal){
            console.log(val,oldVal)
            console.log(val[0].file.name)
            this.show=false
            this.imgShow = true
        }
    }
}
</script>

<style scoped>
main{
    /* overflow: auto; */
    background:rgb(246, 245, 245);
    
}
.coverImg{
    width:63px;
    height:63px;
    border-radius:100%;
}
main .login .van-icon{
    font-size: 30px;
    color: #fff;
    margin-left: 315px
}
main .login{
    background:rgb(2, 218, 92);
    padding: 10px 15px 0 15px;
    border-radius: 0 0 30px 30px;
    overflow:hidden;
    position: relative;
}
main .login p:nth-of-type(1){
    display: flex;
}
main .login button{
    position: absolute;
    left: 100px;
    top: 90px;
    font-size: 12px;
    padding: 2px 8px;
    border: none;
    border-radius: 8px; 
}
main .login >>> .van-uploader__upload{
    border-radius: 50%;
    width: 65px;
    height: 65px;
    margin-right: 0px;
}
main .login p a{
    margin: 20px 0 0 20px;
    color: #fff;
    font-size: 16px;

}
main .login p span{
    display: block;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    background: rgba(3, 95, 8, 0.329);
    height: 22px;
    border-radius: 20px;
    margin: 15px 0 0 90px;
}
main .greenCart{
    display: flex;
    padding: 20px 10px;
    margin:20px 5px 0 5px;
    background:linear-gradient(-45deg,rgb(69, 39, 119),rgb(106, 71, 163));
    border-radius:10px 10px 0 0;
}
main .greenCart p:nth-of-type(1){
    color:#fff;
    font-size: 12px;
    line-height: 18px
}
main .greenCart p:nth-of-type(1) b{
    color:  rgb(33, 179, 19);
    font-size:16px;
    
    margin-right: 10px;
}
main .greenCart p:nth-of-type(2){
    background:rgb(2, 218, 92);
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 20px; 
    margin-left: 30px
}
main .coupons {
    margin: 10px 20px 10px 20px;
    background: #fff;
    display: flex;
    padding: 20px 50px;
    border-radius: 10px
}
main .coupons p{
    display: flex;
    flex-direction: column;
    text-align: center;
    color:#666;
    font-size: 14px;
}
main .coupons p:nth-of-type(2){
    margin: 0  50px;
}
main .coupons p span:nth-of-type(2){
    margin-top:15px; 
}
main .coupons p:nth-of-type(3) span:nth-of-type(3){
    color: rgb(224, 98, 98);
    font-size: 10px;
}
main .myOrder {
    margin: 10px 20px 10px 20px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 10px
}
main .myOrder .title{
    line-height: 26px;
    display: flex;
    margin-bottom: 20px
}
main .myOrder .title span:nth-of-type(1){
    font-size: 16px;
    color: #000;
    font-weight: 800;
    margin-right: 120px
}
main .myOrder .title span:nth-of-type(2){
    font-size: 14px;
    color: #999;
    
}
main .myOrder .title span:nth-of-type(2) .van-icon{
    font-size: 16px;
    color: #999;
}
main .myOrder .modeSelect{
    display: flex;
    color: #333;
    justify-content: space-between
}
main .myOrder .modeSelect p{
    display: flex;
    flex-direction: column;
    text-align: center;
    
}
main .myOrder .modeSelect p .van-icon{
    font-size: 28px;
    line-height: 40px
}
main .myOrder .modeSelect p span{
    font-size: 14px;
    margin-top:8px
}
main .welfare{
    margin: 10px 20px 10px 20px;
    background: #fff;
    border-radius: 10px;
    padding:10px 10px 0 10px; 
    
}
main .welfare h2{
    font-size: 16px;
    margin-left: 10px;
    color: #000;
}
main .welfare p{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 70px;
    height: 90px;
    color: #333
}
main .welfare div{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px
}
main .welfare p .van-icon{
    font-size: 28px;
    color: #666
}
main .welfare p span{
    font-size: 14px;

}
main .welfare p:nth-of-type(3) span:nth-of-type(2){
    font-size:10px;
    color: rgb(252, 74, 74)
}
main .like h2{
    text-align: center;
    color: #000;
    font-size:16px;
    line-height: 30px
}
main .likepro{
    margin: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}
main .likepro dl{
    background: #fff;
    width: 140px;
    padding: 10px 10px;
    position: relative;
    border-radius: 10px;
}
main .likepro dl dt{
    width:100%;
    min-height:120px;
    overflow:hidden;  
}
main .likepro dl dd:nth-of-type(1){
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    line-height: 30px;
}
main .likepro dl dd:nth-of-type(2){
    font-size: 12px;
    color: rgb(246, 53, 53);
    line-height: 20px;
}
main .likepro dl .van-icon{
    font-size: 28px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #fff;
    color:rgb(2, 206, 87)
}
main .likepro img{
    width:100%;
}
</style>